<style lang="scss">
.page-layout {
  //.el-select {
  //  width: 100%;
  //}
}
</style>

<template>
  <div class="page-layout">
    <z-space vertical>
      <h3>布局</h3>

      <z-form-template
          :inline="state.inline"
         :slots="search.slots"
         :def="search.def"
          ref="searchForm"
      >
      </z-form-template>


      <vue-code-mirror :tpl="def.tpl" :js="def.js"></vue-code-mirror>


      <h3>指定字段布局</h3>


      <z-form-template
          :inline="state.inline"
          :slots="layout2.slots"
          :def="layout2.def"
          ref="searchForm"
      >
      </z-form-template>

      <h3>flex</h3>

      <z-form-template
          :inline="state.inline"
          :slots="layout3.slots"
          :def="layout3.def"
          ref="searchForm"
      >
      </z-form-template>

    </z-space>
  </div>
</template>

<script>
import {
  FormInput,
  FormInputNativeNumber,
  FormInputNativeInteger,
  FormSelect,
  FormRadio,
  FormCheckbox, FormBase, FormTextarea
} from "@/zpkgs/hooks/form";
import VueCodeMirror from "@example/components/VueCodeMirror";
import DocProps from "@example/plugins/example/components/DocProps";
import {layoutGrid, layoutFlex} from "../../../static/ext/form/layout-utils";

export default {
  components: {DocProps, VueCodeMirror},
  data() {
    return {
      doc: {
        props: [
          {
            name: 'def',
            type: 'Object',
            defVal: '{}',
            desc: '定义'
          },
          {
            name: 'slots',
            type: 'Object',
            defVal: '{}',
            desc: '插值'
          }
        ],
        methods: [
          {
            name: 'getCurForm',
            params: '',
            desc: '获取当前form'
          },
        ],
        events: [
          {
            name: 'ready',
            params: '{ctx // z-form-template的this}',
            desc: '组件初始化事件'
          },
          {
            name: 'fire',
            params: `[type // 事件名, args // 参数, formCtx // 当前绑定的form context]`,
            desc: 'form 事件转发'
          },
        ]
      },
    }
  },
  setup() {
    const {reactive} = globalThis.vueCompositionAPI


    let _props = {
      text: {
        ...FormInput('文字', {

        }),
        rules: [],
      },
      maxText: {
        ...FormInput('最长10个文字', {
          widgetConfig: {
            maxlength: 10
          },

        }),
        rules: [],
      },
      number: {
        ...FormInputNativeNumber('数字'),
        rules: [],
      },
      select: {
        ...FormSelect('下拉', {
          options: [
            {
              label: '选项1',
              value: 'option1',
            },
            {
              label: '选项2',
              value: 'option2',
            }
          ]
        }),
        rules: [],
      },
      integer: {
        ...FormInputNativeInteger('整数'),
        rules: [],
      },
      radio: {
        ...FormRadio('单选', {
          options: [
            {
              label: '选项1',
              value: 'option1',
            },
            {
              label: '选项2',
              value: 'option2',
            }
          ]
        }),
        rules: [],
      },
      checkbox: {
        ...FormCheckbox('多选', {
          options: [
            {
              label: '选项1',
              value: 'option1',
            },
            {
              label: '选项2',
              value: 'option2',
            }
          ]
        }),
        rules: [],
      },
      startTime: {
        ...FormBase('日期时间', {
          ui: {
            widget: 'CusDateTimePicker'
          }
        }),
        rules: [],
      },
      actDate: {
        ...FormBase('活动日期', {
          ui: {
            widget: 'CusDatePicker',
            wrap_start_tag: 'el-row',
            wrap_start_tag_attr: `style="display: flex;"`
          }
        }),
        rules: [],
      },
      actTime: {
        ...FormBase('', {
          ui: {
            widget: 'CusTimePicker',
            form_item: {
              labelWidth: '30px',
            },
            wrap_end_tags: ['el-row'],
            styles: [
              ['margin-left', '20px']
            ]
          }
        }),
        rules: [],
      },
      textarea: {
        ...FormTextarea('评论', {

        }),
        rules: [],
      },
    }

    let search =  {
      def: {
        properties: layoutGrid([
          {start: 0, end: 2, gutter: 20, defaultSpan: 8 },
          {start: 3, end: 4, gutter: 20, defaultSpan: 12, spanDef: {3: 4}},
          {start: 5, end: 6, gutter: 20, spans: [8, 8, 12, 12]}
        ], ZY.JSON5.parse(ZY.JSON5.stringify(_props))),
      },
    }


    let layout2 =  {
      def: {
        properties: layoutGrid([
          {props: ['select'], defaultSpan:12}
        ], ZY.JSON5.parse(ZY.JSON5.stringify(_props))),
      },
    }



    let layout3 =  {
      def: {
        properties: layoutFlex([
          {start: 0, end: 2, gutter: 20, autoSplit: true },
          {start: 3, end: 4, gutter: 20, autoSplit: true, spanDef: {3: 'auto'}},
        ], ZY.JSON5.parse(ZY.JSON5.stringify(_props))),
      },
    }
    // console.log(layout3.def.properties)


    let state = reactive({
      inline: false
    })

    let def = {
      tpl:
`
<z-form-template
   :slots="search.slots"
   :def="search.def"
    ref="searchForm"
   @fire="search.onFire"
>
</z-form-template>
`,
      js: `
 properties: layoutGrid([
          {start: 0, end: 2, gutter: 20 },
          {start: 3, end: 4, gutter: 20, spans: {3: 4}},
          {start: 5, end: 9, gutter: 20, spans: [8, 16, 12, 12]}
        ], ${ZY.JSON5.stringify(_props, null, 2)})
      `
    }

    return {
      search,
      layout2,
      layout3,
      def,
      state,
    }
  }
}
</script>
